<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .box1 {
    background-color: pink;
    height: 200px;
    line-height: 200px;
  }
  .box2 {
    background-color: fuchsia;
  }
  .box3 {
    margin-top: 20px;
    height: 200px;
    background-color: green;
  }
  .box1 .axl {
    width: 200px;
    vertical-align: middle; /* 垂直居中 */
  }
  .icon {
    /* 行内元素设置高宽不生效，img除外 */
    width: 200px;
    height: 50px;
    background-color: yellow;
  }
</style>
<body>
  <div class="app">
    <h2>html标签大体上分为三种，inline元素，block元素，inline-block元素</h2>
    <!-- 行内元素归纳 -->
    <div class="box1">
      <!-- 行内元素设置高宽不生效，img除外 -->
      <span style="height: 200px; width: 154px;">span: 行内元素</span>
      <!--  vertical-align
        属性适用于行内元素和行内块元素，
        它会调整这些元素在行框中的垂直对齐方式。 -->
      <img class="axl" src="./axl.jpg">
      <a href="#">a标签也是行内元素</a>
      <i class="icon">i标签也是</i>
      <colorss>未知标签，会被默认当成行内元素</colorss>
      <strong>我是行内元素</strong>
    </div>
    <!-- 块级元素归纳 -->
     <div class="box2">
      <p>p标签是块级元素，独占一行</p>
      <h2>h标题也是块级，独占一行</h2>
      <ul>ul或者ol列表是块级</ul>
      <li>列表项li也是块级</li>
      <form action="">form表单也是块级</form>
      <section>section块级</section>
      <header>header块级</header>
      <main>main块级</main>
      <footer>footer块级</footer>
      <article>article块级</article>
     </div>
     <!-- 行内块元素归纳 -->
      <div class="box3">
        <!-- 行内块设置高宽是生效的 -->
        <input style="width: 200px; height: 50px;" type="text" placeholder="我是行内块">
        <button>按钮也是行内块</button>
      </div>
  </div>
</body>
</html>